<script setup>
import {ElMessage, ElNotification, ElMessageBox} from "element-plus";
import {ref} from 'vue'

const data = ref({
  arr: [
    {name: '张三',age:'24', address: '上海市',},
    {name: '李四',age:'37', address: '北京市',},
    {name: '王五',age:'29', address: '广州市',},
  ]
})

//选中的复选框
let idArr = []
const selected = (data) => {
  //console.log("selected", data)

  idArr = [] //重置

  data.forEach((value) => {
    idArr.push(value.id)
  })

  console.log("idArr:", idArr)
}
const openConfirm = () => {
  ElMessageBox.confirm('确认删除?', '标题', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  }).then(() => {
    console.log('确认');
  }).catch(() => {
    console.log('取消')
  })
}
//删除
const del = () => {
  console.log("del:", idArr)
}

//编辑
const edit = (index, row) => {
  console.log("index:", index, "row:", row)
}

</script>

<template>
  <h2>欢迎，管理员!</h2>
  <el-button>返回登录</el-button>
  <el-button type="primary" @click="del">新增用户</el-button>

  <el-table :data="data.arr" @selection-change="selected" border style="width: 900px;margin: 3px 0;">
    <el-table-column type="selection" width="55"></el-table-column>


    <el-table-column prop="name" label="姓名"/>
    <el-table-column prop="age" label="年龄" width="300"/>
    <el-table-column prop="address" label="地址"/>

    <el-table-column label="操作" width="150">
      <template #default="scope">
        <el-button size="small" type="primary" @click="dialog = true">
          编辑
        </el-button>
        <el-button size="small" @click="openConfirm">删除</el-button>
      </template>
    </el-table-column>
  </el-table>


</template>

<style scoped>

</style>